<template>
  <view class="container">
    <!-- 传统风格导航栏 -->
    <view class="custom-nav">
      <text class="nav-title">非遗掼牛论坛</text>
    </view>

 <view class="fab fab-reject" @click="navigateToRejectBox">
        <image class="fab-icon" src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/icon/消息.png" mode="aspectFit"></image>
      </view>

    <!-- 发布按钮 -->
    <view class="fab" @click="navigateToPublish">
      <image class="fab-icon" src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/icon/add_topics.png" mode="aspectFit"></image>
    </view>

    <!-- 话题列表 -->
    <view v-for="topic in topics" :key="topic._id" class="topic-card">
      <!-- 标题和作者 -->
      <view class="topic-header">
        <text class="topic-title">{{ topic.title }}</text>
        <text class="topic-author">{{ topic.author }} · {{ formatTime(topic.create_time) }}</text>
      </view>

      <!-- 图片展示 -->
      <view class="image-grid" v-if="topic.images && topic.images.length > 0">
        <image 
          v-for="(img, index) in topic.images" 
          :key="index"
          :src="img" 
          mode="aspectFill" 
          class="topic-image"
          @click="previewImage(topic.images, index)"
        ></image>
      </view>

      <!-- 内容和操作 -->
      <view class="topic-content">
        <text class="topic-body">{{ topic.content }}</text>
        <view class="action-bar">
          <view 
            class="action-item" 
            :class="{ disabled: topic.votedType }"
            @click="handleVote(topic._id, 'like')"
          >
            <text class="icon">👍</text>
            <text class="count">{{ topic.likes }}</text>
            <text v-if="topic.votedType === 'like'" class="voted-tip">已投票</text>
          </view>
          <view 
            class="action-item" 
            :class="{ disabled: topic.votedType }"
            @click="handleVote(topic._id, 'dislike')"
          >
            <text class="icon">👎</text>
            <text class="count">{{ topic.dislikes }}</text>
            <text v-if="topic.votedType === 'dislike'" class="voted-tip">已投票</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      topics: []
    };
  },
  onShow() {
    this.loadTopics();
  },
  methods: {
    // 加载话题列表
    async loadTopics() {
      uni.showLoading({ title: '加载中...' });
      try {
        // 获取话题数据
        const topicsRes = await uniCloud.callFunction({ name: 'get-topics' });
        const topics = topicsRes.result;

        // 批量检查投票状态
        const checkPromises = topics.map(topic => 
          uniCloud.callFunction({
            name: 'check-vote',
            data: { topicId: topic._id }
          })
        );

        const checkResults = await Promise.all(checkPromises);

        // 合并投票类型
        this.topics = topics.map((topic, index) => ({
          ...topic,
          votedType: checkResults[index].result.votedType
        }));

      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' });
      } finally {
        uni.hideLoading();
      }
    },

    // 处理投票
    async handleVote(id, type) {
      if (!this.checkLogin()) return;
      
      try {
        await uniCloud.callFunction({
          name: 'vote-topic',
          data: { id, type }
        });
        this.loadTopics(); // 刷新列表
      } catch (e) {
        uni.showToast({ title: e.message || '操作失败', icon: 'none' });
      }
    },

    // 图片预览
    previewImage(images, index) {
      uni.previewImage({
        current: index,
        urls: images
      });
    },

    // 登录检查
    checkLogin() {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo) {
        uni.switchTab({ url: '/pages/mine/mine' });
        return false;
      }
      return true;
    },

    // 跳转发布页
    navigateToPublish() {
      if (this.checkLogin()) {
        uni.navigateTo({ url: '/pages/publish/publish' });
      }
    },
     navigateToRejectBox() {
          if (this.checkLogin()) {
            uni.navigateTo({ url: '/pages/rejectBox/rejectBox' });
          }
        },

    // 时间格式化
    formatTime(timestamp) {
      const date = new Date(timestamp);
      const pad = n => n.toString().padStart(2, '0');
      return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
    }
  }
}
</script>

<style scoped>
  .fab-reject {
    margin-bottom: 150rpx;
  }
.container {
  background: #f5f1e8;
  min-height: 100vh;
  padding: 20rpx;
}

.custom-nav {
  height: 120rpx;
  background: #b22222;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  border-radius: 0 0 20rpx 20rpx;
}

.nav-title {
  font-family: '华文行楷';
  color: #fff;
  font-size: 46rpx;
  text-shadow: 2rpx 2rpx 4rpx rgba(0,0,0,0.3);
}

.fab {
  position: fixed;
  right: 40rpx;
  bottom: 100rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: #FFF5E6;
  box-shadow: 0 8rpx 16rpx rgba(139,69,19,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.fab-icon {
  width: 60rpx;
  height: 60rpx;
}

.topic-card {
  background: #fff5e6;
  border: 4rpx solid #8b4513;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
}

.topic-header {
  padding: 20rpx;
  border-bottom: 2rpx dashed #8b4513;
}

.topic-title {
  font-size: 36rpx;
  color: #8b4513;
  font-family: '华文楷体';
  display: block;
}

.topic-author {
  font-size: 24rpx;
  color: #a0522d;
  display: block;
  margin-top: 10rpx;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rpx;
  padding: 20rpx;
}

.topic-image {
  width: 100%;
  height: 220rpx;
  border: 2rpx solid #8b4513;
  border-radius: 12rpx;
}

.topic-content {
  padding: 20rpx;
}

.topic-body {
  color: #654321;
  font-size: 30rpx;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.action-bar {
  display: flex;
  gap: 40rpx;
  border-top: 2rpx dashed #8b4513;
  padding-top: 20rpx;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 8rpx 24rpx;
  background: #fff;
  border: 2rpx solid #8b4513;
  border-radius: 8rpx;
  position: relative;
  margin-left: 100rpx;
}

.icon {
  font-size: 36rpx;
  margin-right: 10rpx;
}

.count {
  font-family: '华文楷体';
  color: #8b4513;
}

.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.voted-tip {
  font-size: 24rpx;
  color: #b22222;
  position: absolute;
  right: -80rpx;
  white-space: nowrap;
}
</style>